import React, {Component} from "react";
import {Button, Form, message,Input} from "antd";
import {connect} from "react-redux";

import * as actions from "../../action/index";
import formItemLayout from '../../constant/formItemLayout'
import {FormattedMessage} from "react-intl";

const FormItem = Form.Item;

class PasswordEditor extends Component {

    state = {
      confirmDirty: false,
    };

    handleSubmitClick = (e) => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.props.submitPasswords(values)
        }
      })
    };

    handleConfirmBlur = e => {
      const { value } = e.target;
      this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };

    compareToFirstPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    };

    validateToNextPassword = (rule, value, callback) => {
      const { form } = this.props;
      if (value && this.state.confirmDirty) {
        form.validateFields(['confirmPassword'], { force: true });
      }
      callback();
    };

    render = () => {
        const {getFieldDecorator} = this.props.form;

        return (
            <Form onSubmit={this.handleSubmit} className="login-form">

                <FormItem {...formItemLayout}
                          label={<FormattedMessage id='旧密码' />}>
                    {getFieldDecorator('oldPassword', {
                        rules: [{required: true, message: 'Please input your old password!'}],
                    })(
                        <Input type="password" placeholder="old password"/>
                    )}
                </FormItem>


                <FormItem {...formItemLayout}
                          label={<FormattedMessage id='新密码' />}>
                    {getFieldDecorator('password', {
                        rules: [
                          {required: true, message: 'Please input your Password!'},
                          {validator: this.validateToNextPassword},],
                    })(
                        <Input type="password" placeholder="Password"/>
                    )}
                </FormItem>

                <FormItem {...formItemLayout}
                          label={<FormattedMessage id='确认密码' />}>
                  {getFieldDecorator('confirmPassword', {
                    rules: [
                      {required: true, message: 'Please confirm your password!'},
                      {validator: this.compareToFirstPassword}],
                  })(
                    <Input type="password" placeholder="Password" onBlur={this.handleConfirmBlur} />
                  )}
                </FormItem>

                <FormItem>
                    <Button type="primary" htmlType="submit" onClick={this.handleSubmitClick}><FormattedMessage id='提交' /></Button>
                </FormItem>
            </Form>
        )

    };
}

const WrappedPasswordEditor = Form.create()(PasswordEditor);

const mapStateToProps = state => ({});

const mapDispatchToProps = dispatch => ({
    submitPasswords: passwords => dispatch(actions.submitPasswords(passwords))
});

export default connect(mapStateToProps, mapDispatchToProps)(WrappedPasswordEditor);


